<div class="tab-content-pad dictionary-management">
    <div class="row m-b20">
        <div class="col-sm-6">
            <button class="btn btn-primary" ng-click="vm.createDictionary()">
                <span class="icon icon-add" aria-hidden="true"></span>
                <span class="m-l5" i-translate="CREATE_NEW_DICTIONARY"></span>
            </button>
        </div>
        <div class="col-sm-6 text-right">
            <div class="search-field m-t5">
                <span class="icon icon-search"></span>
                <input type="search" class="uui-search" placeholder="Search" id="searchDictionary"
                       ng-change="vm.searchDictionary()"
                       ng-model="vm.searchText">
            </div>
        </div>
    </div>
    <div ng-if="vm.dictionary" class="panel panel-info edit-form animated m-t20">
        <div class="panel-heading" i-translate="CREATE_EDIT_DICTIONARY"></div>
        <div class="panel-body ">
            <form id="editForm" name="editForm" role="form" novalidate ng-submit="vm.saveDictionary()"
                  autocomplete="off">
                <div class="row">
                    <div class="col-xs-6">
                        <simple-input>
                            <span i-translate="NAME"></span>
                            <input class="form-control"
                                   ng-attr-name="name"
                                   type="text"
                                   maxlength="200"
                                   ng-model="vm.dictionary.name">
                        </simple-input>
                    </div>
                    <div class="col-xs-6">
                        <indigo-text-area
                            indigo-label="Description"
                            indigo-model="vm.dictionary.description">
                        </indigo-text-area>
                    </div>
                </div>
            </form>
        </div>
        <div class="panel-footer text-right">
            <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="vm.clearDictionary()">
                <span class="icon icon-stop"></span><span class="m-l5" i-translate="CANCEL"></span>
            </button>
            <button type="submit" form="editForm" ng-disabled="editForm.$invalid || vm.isSaving"
                    class="btn btn-primary m-l5">
                <span class="icon icon-save"></span><span class="m-l5" i-translate="SAVE"></span>
            </button>
        </div>
    </div>
    <div class="table-responsive dictionary-management__description" indigo-scroller="x">
        <table class="table table-striped">
            <thead>
            <tr indigo-sort="vm.sortBy.field"
                is-ascending="vm.sortBy.isAscending"
                on-sort="vm.sortDictionaries(predicate, isAscending)">
                <th indigo-sort-by="name">
                    <span i-translate="NAME"></span>
                    <span class="glyphicon glyphicon-sort template-management__icon-sort"></span>
                </th>
                <th indigo-sort-by="description">
                    <span i-translate="DESCRIPTION"></span>
                    <span class="glyphicon glyphicon-sort template-management__icon-sort"></span>
                </th>
                <th>
                    <span i-translate="CREATED_BY"></span>
                </th>
                <th>
                    <span i-translate="CREATION_DATE"></span>
                </th>
                <th>
                    <span i-translate="LAST_EDIT_DATE"></span>
                </th>
                <th>
                    <span i-translate="ACTION"></span>
                </th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="dictionary in vm.dictionaries track by $index" title="{{vm.dictionary.description}}"
                ng-click="vm.setSelected(dictionary.id)"
                ng-class="{'success': dictionary.id === vm.selectedDictionaryId}">
                <td class="dictionary-col-width dictionary-col-elipsis" ng-bind="dictionary.name"></td>
                <td class="dictionary-col-width dictionary-col-elipsis" ng-bind="dictionary.description"></td>
                <td ng-bind="dictionary.author.login"></td>
                <td ng-bind="dictionary.creationDate | date:'MMM DD, YYYY HH:mm:ss z'"></td>
                <td ng-bind="dictionary.lastEditDate | date:'MMM DD, YYYY HH:mm:ss z'"></td>
                <td>
                    <button type="submit"
                            ng-click="vm.editDictionary(dictionary)"
                            class="btn btn-info btn-small">
                        <span class="icon icon-edit"></span>
                        <span class="m-l5" i-translate="EDIT"></span>
                    </button>
                    <button type="submit"
                            ui-sref="entities.dictionary-management.delete({id:dictionary.id})"
                            class="btn btn-info btn-small m-l5">
                        <span class="icon icon-delete"></span>&nbsp;<span i-translate="DELETE"></span>
                    </button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="text-center">
        <div uib-pagination
             class="pagination-sm"
             total-items="vm.totalItems"
             items-per-page="vm.itemsPerPage"
             ng-model="vm.page"
             ng-change="vm.loadAllDictionaries()">
        </div>
    </div>

    <div class="panel panel-info panel-info-collapse words">
        <div class="panel-heading">
            <span class="pull-right glyphicon"
                  ng-class="{'glyphicon-chevron-down': !vm.isCollapsed, 'glyphicon-chevron-up': vm.isCollapsed}"
                  ng-click="vm.isCollapsed = !vm.isCollapsed"></span>
            Words
        </div>

        <div class="panel-body" uib-collapse="vm.isCollapsed">
            <div class="m-b20">
                <button class="btn btn-primary"
                        ng-click="vm.addWord()"
                        ng-disabled="vm.selectedDictionaryId == null">
                    <span class="icon icon-add" aria-hidden="true"></span>
                    <span class="m-l5" i-translate="ADD_NEW_WORD"></span>
                </button>
            </div>

            <div ng-if="vm.word" class="panel panel-info edit-form animated">
                <div class="panel-heading">
                    <span i-translate="CREATE_EDIT_WORD_FOR_DICTIONARY"></span>
                    <span ng-bind="vm.selectedDictionary.name"></span>
                </div>
                <div class="panel-body">
                    <form id="editWordForm" name="editWordForm" role="form" novalidate ng-submit="vm.saveWord()"
                          autocomplete="off">
                        <div class="row m-b10">
                            <div class="col-xs-6">
                                <simple-input>
                                    <span i-translate="NAME"></span>
                                    <input class="form-control"
                                           ng-attr-name="name"
                                           type="text"
                                           maxlength="200"
                                           required
                                           ng-model="vm.word.name">
                                </simple-input>
                            </div>
                            <div class="col-xs-6">
                                <indigo-text-area
                                    indigo-label="Description"
                                    indigo-model="vm.word.description">
                                </indigo-text-area>
                            </div>
                        </div>
                        <indigo-checkbox
                            indigo-label="Active"
                            indigo-model="vm.word.enable">
                        </indigo-checkbox>
                    </form>
                </div>
                <div class="panel-footer text-right">
                    <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="vm.clearWord()">
                        <span class="icon icon-stop"></span><span class="m-l5" i-translate="CANCEL"></span>
                    </button>
                    <button type="submit" form="editWordForm" ng-disabled="editWordForm.$invalid || vm.isWordSaving"
                            class="btn btn-primary m-l5">
                        <span class="icon icon-save"></span><span class="m-l5" i-translate="SAVE"></span>
                    </button>
                </div>
            </div>
            <div class="table-responsive" indigo-scroller="x">
                <table class="table table-striped nomarg">
                    <thead>
                    <tr>
                        <th i-translate="NAME"></th>
                        <th i-translate="DESCRIPTION"></th>
                        <th i-translate="STATUS"></th>
                        <th i-translate="RANK"></th>
                        <th i-translate="CREATION_DATE"></th>
                        <th i-translate="ACTION"></th>
                    </tr>
                    </thead>
                    <tbody dragula='"dragableWords"' dragula-model="vm.selectedDictionary.words">
                    <tr ng-repeat="word in vm.selectedDictionary.words track by $index"
                        title="{{word.description}}"
                        class="cursor-move">
                        <td class="dictionary-col-width dictionary-col-elipsis" ng-bind="word.name"></td>
                        <td class="dictionary-col-width dictionary-col-elipsis" ng-bind="word.description"></td>
                        <td>
                            <span
                                ng-class="{'glyphicon glyphicon-ok': word.enable, 'glyphicon glyphicon-remove': !word.enable}"></span>
                        </td>
                        <td ng-bind="word.rank"></td>
                        <td ng-bind="word.creationDate | date:'MMM DD, YYYY HH:mm:ss z'"></td>
                        <td>
                            <button type="submit"
                                    ng-click="vm.editWord(word)"
                                    class="btn btn-info btn-small">
                                <span class="glyphicon glyphicon-pencil"></span>&nbsp;<span i-translate="EDIT"></span>
                            </button>
                            <button type="submit"
                                    ng-click="vm.deleteWord(word)"
                                    class="btn btn-info btn-small m-l5">
                                <span class="icon icon-delete"></span>&nbsp;<span i-translate="DELETE"></span>
                            </button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
